<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>个人博客</title>
		<link rel="stylesheet" href="animate.css" />
		<style type="text/css">
			.bg {
				background: url("./pic1.win4000.jpeg") no-repeat;
				background-size: 100% 100%;
				background-attachment: fixed;
			}
			div{
				position: relative;
			}
			h2{
				font-size: 25px;
				color: wheat;
				position: fixed;
				float: left;
				right: 30%;
				top: 38%;
			}
			.flex-container {
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				width: 25%;
				height: 30px;
				align-items: center;
				float: right;
				position: fixed;
				top: 0%;
				right: 0;
			}
			
			.flex-item {
				flex-direction: row;
				height: 30px;
				width: 25%;
				align-items: center;
				float: right;
				right: 0;
			}
			a{
				text-decoration: none;
				color: white;
				font-size: 20px;
			}
		</style>

	</head>
	<body class="bg">
		<!--头部-->
		<div id="header">
			<h5>Welcome to my domain</h5>
		</div>
		<!--导航栏-->
		<div class="flex-container">
			<div class="flex-item"><a href="#">设置</a></p></div>
			<div class="flex-item"><a href="#">我的二维码</a></p></div>
			<div class="flex-item"><a href="#">消息列表</a></p></div>
		</div>
		<!--main-->
		<div>
			<img class="touxiang" src="4.jpg" />
			<p>【法外狂徒】</p>
			<h1>男 20岁 山西 高平</h1>
		</div>
		<div >
			<img class="yuanxing-1" src="yuan.jpg"/>
			<h2>学生</h2>
		</div>
		<div>
			<img class="yuanxing-2" src="yuan.jpg"/>
			<h3>00后</h3>
		</div>
		<div>
			<img class="yuanxing-3" src="yuan.jpg"/>
			<h4>天蝎座</h4>
		</div>
		<!--底部-->
		<div class="bottom">
			<ul>
				<li><a href="homepage.html">主页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="photo.html">个人相册(胆小慎入)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="instroduction.html">简介&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="message.html">留言</a></li>
			</ul>
		</div>
	</body>
</html>
